<template>
  <view class="index">
    <image class="bg" src="./static/bg.jpg" mode="aspectFill"></image>
    <view v-if="!showResult">
      <view class="title">
        <text class="main">阳历 - 农历</text>
        <text class="sub_title">天干、地支，一键计算</text>
      </view>
      <view class="lunpan_box">
        <view class="holder">
          <view class="lunpan">
            <image class="img img1" src="./static/luopan.png" mode="aspectFit"></image>
            <image class="img img2" src="./static/zhizheng.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="label">请填写出生日期</view>
      <view class="ind_from">
        <view class="row" style="padding: 0;">
          <picker
            class="birth"
            mode="date"
            :value="birth"
            start="1900-01-01"
            @change="changeBirthChange"
          >
            <view class="uni-input">{{
              birth ? birth : "请填写出生日期"
            }}</view>
          </picker>
        </view>
      </view>
      <view class="btn" @click="submit">开始查询</view>
    </view>
    <view v-if="showResult" class="result">
      <view class="title">年龄计算器</view>
      <view class="table">
        <view class="row">
          <view class="col col1">周岁</view>
          <view class="col col2">{{result.age}}岁</view>
        </view>
        <view class="row">
          <view class="col col1">虚岁</view>
          <view class="col col2">{{result.virtualAge}}岁</view>
        </view>
        <view class="row">
          <view class="col col1">生肖</view>
          <view class="col col2">{{result.zodiac}}</view>
        </view>
        <view class="row">
          <view class="col col1">星座</view>
          <view class="col col2">{{result.constellation}}</view>
        </view>
        <view class="row">
          <view class="col col1">出生天数</view>
          <view class="col col2">{{result.daysAlive}}天</view>
        </view>
        <view class="row">
          <view class="col col1">阳历出生日期</view>
          <view class="col col2">{{birth}}</view>
        </view>
        <view class="row">
          <view class="col col1">农历出生日期</view>
          <view class="col col2">{{result.lunarDayName}}</view>
        </view>
        <view class="row">
          <view class="col col1">下次阳历生日</view>
          <view class="col col2">
            <view>{{result.nextBirthday}}</view>
            <view>距离还有{{result.daysToNextBirthday}}天</view>
          </view>
        </view>
      </view>
      <view class="btn" @click="reset">重新计算</view>
    </view>
    <button class="share" open-type="share">分享</button>
    <!-- <view class="sub_text">
      <view class="p red">温馨提示：以上信息仅供参考！</view>
    </view> -->
    <view class="pub_ad_banner">
      <!-- #ifdef MP-TOUTIAO -->
      <ad
        :unit-id="adBannerIdDouyin"
        :ad-intervals="30"
        :fixed="false"
        type="banner"
        scale="100"
      />
      <!-- #endif -->
      <!-- #ifdef MP-KUAISHOU -->
      <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import {
  showAdConfirmModal,
  adVideoCreate,
  adVideoShow,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
import LunarCalendar from "lunar-calendar";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      birth: "1980-01-01",
      timer: null,
      showResult: false,
      isUnlock: false,
      result: {
        oldBirthday: "",
        lunarDayName: "",
        age: 0,
        virtualAge: 0,
        zodiac: "",
        constellation: "",
        daysAlive: 0,
        nextBirthday: "",
        daysToNextBirthday: 0
      },
    };
  },
  onLoad(option) {
    adVideoCreate();
  },
  methods: {
    reset(){
      this.showResult = false;
    },
    changeBirthChange(e) {
      clearTimeout(this.timer);
      this.birth = e.detail.value;
      this.showResult = false;
    },
    getConstellation(month, day) {
      const dates = [20, 19, 21, 20, 21, 22, 23, 23, 23, 24, 23, 22];
      const constellations = ['摩羯座', '水瓶座', '双鱼座', '白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座'];
      return day < dates[month - 1] ? constellations[month - 1] : constellations[month];
    },
    calculateNextBirthday(birthDate) {
      const today = new Date();
      const birth = new Date(birthDate);
      const nextBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
      
      if (today > nextBirthday) {
        nextBirthday.setFullYear(today.getFullYear() + 1);
      }
      
      const diffTime = nextBirthday - today;
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
      
      return {
        date: nextBirthday.toISOString().split('T')[0],
        days: diffDays
      };
    },
    tranTime(birth) {
      var date = new Date(birth);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      
      // 计算农历
      const lunar = LunarCalendar.solarToLunar(year, month, day);
      this.result.oldBirthday = `${lunar.lunarYear}-${lunar.lunarMonth}-${lunar.lunarDay}`;
      this.result.lunarDayName = `${lunar.lunarMonthName}${lunar.lunarDayName}`;
      
      // 计算周岁
      const today = new Date();
      let age = today.getFullYear() - year;
      const monthDiff = today.getMonth() - (month - 1);
      if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < day)) {
        age--;
      }
      this.result.age = age;
      
      // 计算虚岁
      this.result.virtualAge = age + 1;
      
      // 设置生肖
      this.result.zodiac = lunar.zodiac;
      
      // 计算星座
      this.result.constellation = this.getConstellation(month, day);
      
      // 计算出生天数
      const birthDate = new Date(birth);
      const diffTime = today - birthDate;
      this.result.daysAlive = Math.floor(diffTime / (1000 * 60 * 60 * 24));
      
      // 计算下次生日
      const nextBirthday = this.calculateNextBirthday(birth);
      this.result.nextBirthday = nextBirthday.date;
      this.result.daysToNextBirthday = nextBirthday.days;
      
      this.showResult = true;
    },
    getResult() {
      this.tranTime(this.birth);
      this.showResult = true;
      this.isUnlock = true;
    },
    submit() {
      if (this.birth == "") {
        this.global.toast("请设置出生日期");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.index {
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  padding: 60px 20px 20px 20px;
  background: url("./static/bg.jpg") no-repeat center center;
  .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
}
.title{
  .main{
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .sub_title{
    font-size: 16px;
    display: block;
  }
}
.center {
  width: 100%;
}
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  // margin-top: 200px;
  border: 4rpx solid #499a7f;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 190px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      display: flex;
      input {
        width: 100%;
        display: inline-block;
        margin-right: 10px;
        background: #ccc;
        text-align: center;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #499a7f;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.label {
  text-align: center;
  margin-bottom: 10px;
}
.result {
  .table{
    background: #fff;
    border: 1px solid #2d2d2d;
    .row{
      display: flex;
      border-bottom: 1px solid #2d2d2d;
      &:last-child{
        border-bottom: 0;
      }
      .col{
        width: 100%;
        text-align: center;
        border-right: 1px solid #2d2d2d;
        padding: 10px 4px;
        font-size: 16px;
        color: #2d2d2d;
        align-items: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        &:last-child{
          border-right: 0;
        }
      }
      .col1{
        width: 100px;
        flex-shrink: 0;
      }
      .col2{
        width: 100%;
      }
    }
  }

  .title {
    text-align: center;
    font-size: 26px;
    margin-bottom: 10px;
  }
  .desc {
    font-size: 24px;
    text-align: center;
    .strong {
      font-size: 32px;
      color: #ff1afe;
    }
  }
}
.share{
  margin-top: 15px;
  background: #ffa242;
  color: #fff;
}
.birth {
  margin: 0 auto;
  padding: 8px 0;
  width: 100%;
  display: block;
  text-align: center;
}
.title{
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
}
.lunpan_box{
	width:100%;height:100%; z-index:9999; display:flex; justify-content: center; align-items: center; margin-bottom: 50px;
	.holder{
		margin:0 auto; z-index:105;
		.lunpan{
			width:170px;height:170px; margin:0 auto; position:relative;
			.img{width:170px;height:170px;}
			.img1{width:100%; height:100%; animation: rotate 4s linear infinite;}
			.img2{width:100%; height:100%; position:absolute; top:0; left:0; padding:50rpx; box-sizing:border-box; animation: rotate2 4s linear infinite;}
		}
		.p{color:#FFF; text-align:center; z-index:110;margin:0 auto; padding-top:30rpx;}
	}
}
@-webkit-keyframes rotate2{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(-360deg);
        transform:rotate(-360deg);
    }
}
@-webkit-keyframes rotate{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
</style>
